<template>
  <el-menu
    router
    :default-active="activeMenu"
    background-color="#42426e"
    active-background-color="#5B5487"
    class="el-menu-vertical-demo"
    text-color="#bab3b3"
    active-text-color="#fff"
    :unique-opened="true"
    @select="saveActiveMenu"
  >
    <!--  background-color="#595588" active-background-color="#5B5487"-->
    <!--   <template v-for="(item, index) in nowMenus">
      <! -- :index="只能绑定字符串的值" -- >
      <el-submenu v-if="item.children.length !== 0 && item.menuPath === null" :index="index + ''" :key="item.menuId">
        <template slot="title">
          <i :class="item.menuIcon"></i>
          <span>{{ item.menuTitle }}</span>
        </template>
        <template v-for="(item2, index2) in item.children">
          <el-menu-item
            v-if="item2.menuState !== 0"
            :index="index + '-' + (index2 + 1)"
            :route="'/home/' + item2.menuPath"
            :key="item2.menuId"
            >{{ item2.menuTitle }}</el-menu-item
          >
        </template>
      </el-submenu>
      <el-menu-item v-else :index="'' + index" :route="'/home/' + item.menuPath" :key="item.menuId">
        <i :class="item.menuIcon"></i>
        <span slot="title">{{ item.menuTitle }}</span>
      </el-menu-item>
    </template>  -->

    <el-menu-item index="0" route="/home/site">
      <i class="el-icon-menu"></i>
      <span slot="title">工作台</span>
    </el-menu-item>
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-user-solid"></i>
        <span>客户管理</span>
      </template>
      <el-menu-item index="1-1" route="/home/customemstype">客户类型管理</el-menu-item>
      <el-menu-item index="1-2" route="/home/customems">客户管理</el-menu-item>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-s-tools"></i>
        <span>水表管理</span>
      </template>
      <el-menu-item index="2-1" route="/home/waterqualitymg">仪表管理</el-menu-item>
      <el-menu-item index="2-2" route="/home/waterqualitytype">仪表类型管理</el-menu-item>
    </el-submenu>

    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-s-help"></i>
        <span>计费管理</span>
      </template>
      <el-menu-item index="3-1" route="/home/accountingmg">基价设置</el-menu-item>
      <el-menu-item index="3-2" route="/home/accountingtype">计费类型管理</el-menu-item>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-s-shop"></i>
        <span>收费管理</span>
      </template>
      <el-menu-item index="4-1" route="/home/meter_records">抄表记录</el-menu-item>
      <el-menu-item index="4-2" route="/home/bill">生成账单</el-menu-item>
    </el-submenu>

    <el-menu-item index="5" route="/home/pay_cost">
      <i class="el-icon-s-claim"></i>
      <span slot="title">缴费管理</span>
    </el-menu-item>

    <el-menu-item index="6" route="/home/districtmg">
      <i class="el-icon-location"></i>
      <span slot="title">区域管理</span>
    </el-menu-item>

    <el-menu-item index="7" route="/home/statistic_nalysis">
      <i class="el-icon-s-data"></i>
      <span slot="title">统计分析</span>
    </el-menu-item>

    <el-menu-item index="8" route="/home/notice">
      <i class="el-icon-copy-document"></i>
      <span slot="title">通知公告</span>
    </el-menu-item>
    <el-submenu index="9">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>系统设置</span>
      </template>
      <el-menu-item index="9-1" route="/home/systemaccount">
        <span slot="title">账号管理</span>
      </el-menu-item>
      <el-menu-item index="9-2" route="/home/systemroles">
        <span slot="title">角色管理</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { findRolePermissionById } from '@/config/api'
export default {
  data() {
    return {
      nowMenus: [], // 过滤后的菜单数据
      roles: [], //角色
      activeMenu: sessionStorage.getItem('acitveMenu') ? sessionStorage.getItem('acitveMenu') : '0'
    }
  },
  created() {
    findRolePermissionById({ roleId: this.$store.state.userInfo.roleId }).then(res => {
      if (res.code === 200) {
        // console.log(res.data)
        this.roles = res.data //角色权限数据
        let soureMenus = this.$store.state.menu
        // 循环判断每一个菜单的数据和账号的权限数据的比较，删除没有权限的菜单数据
        soureMenus.forEach((item, i, arr1) => {
          if (this.roles.some(el_2 => el_2.menuId === item.menuId && el_2.checked) === false) {
            arr1.splice(i, 1)
          }
          // 循环输出子菜单中没有权限的数据
          item.children.forEach((el, index, arr2) => {
            if (this.roles.some(el_2 => el_2.menuId === el.menuId && el_2.checked) === false) {
              arr2.splice(index, 1)
            }
          })
        })
        // console.log(soureMenus)
        // 把工作台移动到第一位
        soureMenus.forEach((item, index, arr) => {
          if (item.menuTitle === '工作台') {
            let obj = arr.splice(index, 1)
            soureMenus.unshift(obj[0])
          }
        })
        this.nowMenus = soureMenus
        // this.$message({
        //   message: '查询角色的权限成功',
        //   type: 'success'
        // })
      } else {
        this.$message({
          message: '查询角色的权限失败',
          type: 'warning'
        })
      }
    })
  },

  methods: {
    saveActiveMenu(index) {
      sessionStorage.setItem('acitveMenu', index)
      this.activeMenu = index
    }
  }
}
</script>

<style></style>
